<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐</title>
    <!-- 引入外部css文件 -->
    <!-- 初始化 -->
    <link rel="stylesheet" href="css/initialize.css">
    <!-- 头部导航栏 -->
    <link rel="stylesheet" href="css/header-nav.css">
    <!-- 未登录界面、登陆后的用户信息页面 -->
    <link rel="stylesheet" href="css/login-like.css">
    <!-- 歌单推荐区域 -->
    <link rel="stylesheet" href="css/playlist-recommend.css">
    <!-- 搜索 -->
    <link rel="stylesheet" href="css/search.css">
    <!-- MV信息页 -->
    <link rel="stylesheet" href="css/mv.css">
    <!-- 单曲信息 -->
    <link rel="stylesheet" href="css/song.css">
    <!-- MV评论、单曲评论公共css -->
    <link rel="stylesheet" href="css/comment.css">
    <!-- 播放音乐 -->
    <link rel="stylesheet" href="css/playMusic.css">
    <!-- 歌单信息 -->
    <link rel="stylesheet" href="css/playlist-inf.css">
</head>

<body>
    <!-- 版心页面 -->
    <div id="whole-page">
        <!-- 背景遮罩层 -->
        <div class="login-mask"></div>
        <!-- 登录 -->
        <div class="login">
            <p class="use-phone-number">手机登录/邮箱登录</p>
            <span class="close-button"></span>
            <input type="text" placeholder="手机号码/邮箱" class="phone-number" autofocus="autofocus">
            <div class="phone-warning"></div>
            <input type="password" placeholder="密码" class="password">
            <div class="pwd-warning"></div>
            <button class="login-confirm">登录</button>
        </div>



        <!-- 头部 -->
        <header>
            <!-- logo -->
            <img src="images/QQ-logo.png">

            <!-- 导航栏 -->
            <ul class="header-top-nav clearfix">
                <li class="default-selected"><a href="javasript:;" class="music-text">音乐馆</a></li>
                <li><a class="music-text my-music">我的音乐</a></li>
                <li><a href="javasript:;" class="music-text">客户端</a></li>
                <li><a href="javasript:;" class="music-text">开放平台</a></li>
                <li><a href="javasript:;" class="music-text">VIP</a></li>
                <img src="images/QQ-privilege.png">
                <span class="top-nav-span"></span>
            </ul>

            <!-- 搜索框 -->
            <div class="header-search-box">
                <input type="text" placeholder="搜索用户、MV、歌单、用户" class="search-input">
                <button class="search-button"></button>
            </div>

            <!-- 服务区域 -->
            <div class="header-user">
                <!-- "登录" -->
                <div class="login-font">登录</div>

                <!-- 开通VIP -->
                <div class="open-VIP-box">
                    <div class="openVIP">开通VIP</div>
                    <div class="openVIP-down">
                        <div class="open-green-diamond">开通绿钻豪华版</div>
                        <div class="open-pay">开通付费包</div>
                    </div>
                </div>

                <!-- 充值 -->
                <div class="top-up-box">
                    <div class="top-up">充值</div>
                    <div class="top-up-down">
                        <div class="purchase-le">充值乐币</div>
                        <div class="top-up-menu">充值饭票</div>
                    </div>
                </div>
            </div>
        </header>



        <!-- 白色导航栏 -->
        <nav class="white-nav">
            <div>
                <a href="#" class="white-nav-current">首页</a>
                <a href="#">歌手</a>
                <a href="#">新碟</a>
                <a href="#">排行榜</a>
                <a href="#">分类歌单</a>
                <a href="#">电台</a>
                <a href="#">MV</a>
                <a href="#">数字专辑</a>
                <a href="#">票务</a>
            </div>
        </nav>



        <!-- 歌单推荐 -->
        <div class="playlist-section">
            <section class="playlist">
                <!-- 标题 -->
                <div class="playlist-head">
                    <p class="playlist-title">歌&nbsp;单&nbsp;推&nbsp;荐</p>
                </div>

                <!-- tab栏 -->
                <div class="playlist-tab">
                    <a href="javasript:;" class="playlist-tab-current">为你推荐</a>
                    <a href="javasript:;">网络歌曲</a>
                    <a href="javasript:;">英语</a>
                    <a href="javasript:;">伤感</a>
                    <a href="javasript:;">官方歌单</a>
                    <a href="javasript:;">情歌</a>
                </div>

                <!-- 左右箭头 -->
                <div class="arrow-left-box">
                    <div class="arrow-left"></div>
                </div>
                <div class="arrow-right-box">
                    <div class="arrow-right"></div>
                </div>

                <!-- 轮播图区域 -->
                <div class="carousel-area">
                    <!-- 小圆点 -->
                    <div class="carousel-point-box">
                        <div class="carousel-point current-point"></div>
                        <div class="carousel-point"></div>
                        <div class="carousel-point"></div>
                    </div>

                    <!-- 轮播图 -->
                    <div class="carousel clearfix">
                        <!-- 第一张轮播图 -->
                        <ul class="carousel-item">
                            <li>
                                <a href="#" class="carousel-pic1">
                                    <div class="display-button"></div>
                                </a>
                                <div class="playlist-mask"></div>
                                <a href="#" class="playlist-introduction">『旋律rap』特立独行，开辟一方</a>
                                <div class="play-amount">播放量：25.8万</div>
                            </li>
                            <li>
                                <a href="#" class="carousel-pic2">
                                    <div class="display-button"></div>
                                </a>
                                <div class="playlist-mask"></div>
                                <a href="#" class="playlist-introduction">严浩翔 | 云程发轫，会万里可期</a>
                                <div class="play-amount">播放量：72.7万</div>
                            </li>
                            <li>
                                <a href="#" class="carousel-pic3">
                                    <div class="display-button"></div>
                                </a>
                                <div class="playlist-mask"></div>
                                <a href="#" class="playlist-introduction">Remix中文说唱·枕头为什么湿了</a>
                                <div class="play-amount">播放量：111.0万</div>
                            </li>
                            <li>
                                <a href="#" class="carousel-pic4">
                                    <div class="display-button"></div>
                                </a>
                                <div class="playlist-mask"></div>
                                <a href="#" class="playlist-introduction">满级人类进化之路必备BGM</a>
                                <div class="play-amount">播放量：2658.1万</div>
                            </li>
                            <li>
                                <a href="#" class="carousel-pic5">
                                    <div class="display-button"></div>
                                </a>
                                <div class="playlist-mask"></div>
                                <a href="#" class="playlist-introduction">蹦迪嗨曲｜拥抱狂欢，放肆玩乐</a>
                                <div class="play-amount">播放量：648.6万</div>
                            </li>
                        </ul>

                        <!-- 第二张轮播图 -->
                        <ul class="carousel-item2">
                            <li>
                                <a href="#" class="carousel-pic6">
                                    <div class="display-button"></div>
                                </a>
                                <div class="playlist-mask"></div>
                                <a href="#" class="playlist-introduction">90后回忆: MP3时代的必备歌曲</a>
                                <div class="play-amount">播放量：1.6亿</div>
                            </li>
                            <li>
                                <a href="#" class="carousel-pic7">
                                    <div class="display-button"></div>
                                </a>
                                <div class="playlist-mask"></div>
                                <a href="#" class="playlist-introduction">粤语女声｜环绕在耳边的港式风味</a>
                                <div class="play-amount">播放量：90.2万</div>
                            </li>
                            <li>
                                <a href="#" class="carousel-pic8">
                                    <div class="display-button"></div>
                                </a>
                                <div class="playlist-mask"></div>
                                <a href="#" class="playlist-introduction">游戏BGM • 高潮踩点，点燃热血</a>
                                <div class="play-amount">播放量：3042.1万</div>
                            </li>
                            <li>
                                <a href="#" class="carousel-pic9">
                                    <div class="display-button"></div>
                                </a>
                                <div class="playlist-mask"></div>
                                <a href="#" class="playlist-introduction">Jazz&Blues · 酒馆微醺般情调</a>
                                <div class="play-amount">播放量：310.6万</div>
                            </li>
                            <li>
                                <a href="#" class="carousel-pic10">
                                    <div class="display-button"></div>
                                </a>
                                <div class="playlist-mask"></div>
                                <a href="#" class="playlist-introduction">有没有一首歌，曾让你热泪盈眶？</a>
                                <div class="play-amount">播放量：1.4亿</div>
                            </li>
                        </ul>

                        <!-- 第三张轮播图 -->
                        <ul class="carousel-item3">
                            <li>
                                <a href="#" class="carousel-pic11">
                                    <div class="display-button"></div>
                                </a>
                                <div class="playlist-mask"></div>
                                <a href="#" class="playlist-introduction">“小众且好听” 超温柔的英文歌</a>
                                <div class="play-amount">播放量：128.9亿</div>
                            </li>
                            <li>
                                <a href="#" class="carousel-pic12">
                                    <div class="display-button"></div>
                                </a>
                                <div class="playlist-mask"></div>
                                <a href="#" class="playlist-introduction">李信｜这里是为我所统帅的战场！</a>
                                <div class="play-amount">播放量：1978.4</div>
                            </li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </section>
        </div>



        <!-- "我的音乐"未登陆页面 -->
        <div class="user-message-page">
            <div class="private-space">私人音乐空间,听我想听的歌</div>
            <div class="login-to-manage">登陆管理我的音乐,多终端同步</div>
            <button class="no-login-button">立即登录</button>
        </div>



        <!-- 用户信息页 -->
        <div class="user-inf-page">
            <!-- 用户基本信息 -->
            <div class="user-basic-inf">
                <div class="user-inf-head"></div>
                <div class="user-inf-name"></div>
                <div class="user-inf-signature"></div>
                <div class="user-inf-nav">
                    <div class="user-likes-nav default-select">我的喜欢</div>
                    <div class="user-playlists-nav">我的歌单</div>
                </div>
            </div>

            <!-- "我的喜欢""我的歌单"区域 -->
            <div class="user-likes-playlists-area">
                <!-- "我的喜欢" -->
                <div class="likes-playlists-middle-area">
                    <div class="like-title">
                        <div class="blank"></div>
                        <div class="song-text">歌曲</div>
                        <div class="player-text">歌手</div>
                        <div class="album-text">发行时间</div>
                    </div>

                    <!-- 喜欢的音乐盒子 -->
                    <ul class="like-box">
                        <!-- 样板节点 -->
                        <li class="like-item">
                            <div class="item-count"></div>
                            <div class="item-name"></div>
                            <div class="item-player"></div>
                            <div class="item-album"></div>
                        </li>
                    </ul>
                </div>

                <!-- "我的歌单" -->
                <div class="user-playlists-middle-area">
                    <!-- 新建歌单按钮 -->
                    <button class="create-new-playlist-btn">新建歌单</button>
                    <!-- 新建歌单盒子 -->
                    <div class="create-box">
                        <div class="create-box-title">新建歌单
                            <span class="create-box-close">X</span>
                        </div>
                        <div class="create-box-name">歌单名</div>
                        <!-- 歌单名输入框 -->
                        <input type="text" class="create-playlist-name">
                        <!-- 剩余字数 -->
                        <div class="rest-count">20</div>
                        <!-- 超字数提示 -->
                        <div class="above-warning">歌单名最多20个字!</div>
                        <button class="cancel-create-btn">取消</button>
                        <button class="certain-create-btn">确定</button>
                    </div>
                    <!-- 标题 -->
                    <div class="my-playlists-state">
                        <div class="my-playlists-name">歌单</div>
                        <div class="my-playlists-num">曲目数</div>
                        <div class="my-playlists-count">播放量</div>
                    </div>
                    <!-- 歌单行 -->
                    <ul class="my-playlists-each-line">
                        <!-- 此处动态生成li -->
                    </ul>
                </div>

                <!-- 歌单信息页 -->
                <div class="playlist-detail-middle-area">
                    <!-- 歌单基本信息 -->
                    <div class="playlist-basic-inf">
                        <div class="playlist-picture"></div>
                        <div class="playlist-name"></div>
                        <div class="playlist-play-count"></div>
                    </div>
                    <!-- 歌单内的所有单曲 -->
                    <div class="playlist-songs-area">
                        <div class="playlist-song-state">
                            <div class="song-sub-name-title">歌曲</div>
                            <div class="song-sub-player-title">歌手</div>
                            <div class="song-sub-album-title">专辑</div>
                        </div>
                        <ul class="playlist-song-box">
                            <!-- 此处动态生成li -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>



        <!-- 搜索页面 -->
        <div class="search-area">
            <!-- 搜索歌曲中心页面 -->
            <div class="search-middle-area">
                <!-- 搜索盒子 -->
                <div class="search-box">
                    <!-- 搜索框 -->
                    <input type="text" class="search" placeholder="搜索用户、MV、歌单、用户">
                    <!-- 搜索放大镜 -->
                    <button class="search-btn"></button>

                    <!-- 模糊搜索 -->
                    <div class="relevant-result-box">
                        <!-- 单曲 -->
                        <div class="songs-tip">单曲</div>
                        <ul class="relevant-songs">
                            <li class="relevant-songs-item"></li>
                            <li class="relevant-songs-item"></li>
                            <li class="relevant-songs-item"></li>
                            <li class="relevant-songs-item"></li>
                        </ul>

                        <!-- 歌单 -->
                        <div class="playlists-tip">歌单</div>
                        <ul class="relevant-playlists">
                            <li class="relevant-playlists-item"></li>
                            <li class="relevant-playlists-item"></li>
                        </ul>

                        <!-- 专辑 -->
                        <div class="albums-tip">专辑</div>
                        <ul class="relevant-albums">
                            <li class="relevant-albums-item"></li>
                            <li class="relevant-albums-item"></li>
                        </ul>
                    </div>

                    <!-- 历史搜索 -->
                    <div class="history-search-box">
                        <div class="history-search-title">历史搜索
                            <!-- 清除搜索记录按钮 -->
                            <span class="clear-btn"></span>
                        </div>
                        <!-- 历史搜索盒子 -->
                        <ul class="history-search">
                            <!-- 此处动态生成li -->
                        </ul>
                    </div>
                </div>

                <!-- 热门搜索 -->
                <div class="hot-search-box">热门搜索：
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>

            <!-- 搜索结果渲染区域 -->
            <div class="search-result-area">
                <!-- 搜索结果渲染中心区域 -->
                <div class="result-middle-area">
                    <!-- 导航栏 -->
                    <div class="result-nav">
                        <span class="result-nav-songs">单曲</span>
                        <span class="result-nav-playlists">歌单</span>
                        <span class="result-nav-albums">专辑</span>
                        <span class="result-nav-mvs">MV</span>
                    </div>

                    <!-- 单曲搜索结果 -->
                    <div class="result-main-area-songs">
                        <!-- 序号 -->
                        <div class="result-numbers">
                            <div class="result-numbers-header"></div>
                            <ul class="result-numbers-box">
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                                <li>5</li>
                                <li>6</li>
                                <li>7</li>
                                <li>8</li>
                                <li>9</li>
                                <li>10</li>
                            </ul>
                        </div>

                        <!-- 单曲 -->
                        <div class="result-songs">
                            <div class="result-songs-header">歌曲</div>
                            <ul class="result-songs-box">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>

                        <!-- 歌手 -->
                        <div class="result-artists">
                            <div class="result-artists-header">歌手</div>
                            <ul class="result-artists-box">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>

                        <!-- 专辑 -->
                        <div class="result-albums">
                            <div class="result-albums-header">专辑</div>
                            <ul class="result-albums-box">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>

                    <!-- 歌单搜索结果 -->
                    <div class="result-main-area-playlists">
                        <!-- 歌单图片 -->
                        <div class="result-playlists-area1">
                            <div class="result-playlists-title">歌单</div>
                            <ul class="result-playlists-pictures-box">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>

                        <!-- 歌单名 -->
                        <div class="result-playlists-area2">
                            <div class="result-playlists-title"></div>
                            <ul class="result-playlists-names-box">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>

                        <!-- 歌单创建人 -->
                        <div class="result-playlists-area3">
                            <div class="result-playlists-title">创建人</div>
                            <ul class="result-playlists-users-box">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>

                        <!-- 歌单播放量 -->
                        <div class="result-playlists-area4">
                            <div class="result-playlists-title">播放量</div>
                            <ul class="result-playlists-counts-box">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>

                    <!-- 专辑搜索结果 -->
                    <div class="result-main-area-albums">
                        <!-- 专辑图片 -->
                        <div class="result-albums-area1">
                            <div class="result-albums-title">专辑</div>
                            <ul class="result-albums-pictures-box">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>

                        <!-- 专辑名 -->
                        <div class="result-albums-area2">
                            <div class="result-albums-title"></div>
                            <ul class="result-albums-names-box">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>

                        <!-- 专辑歌手 -->
                        <div class="result-albums-area3">
                            <div class="result-albums-title">歌手</div>
                            <ul class="result-albums-users-box">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>

                        <!-- 专辑类型 -->
                        <div class="result-albums-area4">
                            <div class="result-albums-title">类型</div>
                            <ul class="result-albums-types-box">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>

                    <!-- MV搜索结果 -->
                    <div class="result-main-area-mvs">
                        <!-- 第一行快 -->
                        <div class="result-mvs-line1">
                            <div class="result-mvs-item mvs-margin">
                                <a href="javascript:;" class="mv-pic">
                                    <div class="mv-button"></div>
                                    <div class="mv-mask"></div>
                                </a>
                                <div class="mv-name"></div>
                                <div class="mv-player"></div>
                            </div>
                            <div class="result-mvs-item mvs-margin">
                                <a href="javascript:;" class="mv-pic">
                                    <div class="mv-button"></div>
                                    <div class="mv-mask"></div>
                                </a>
                                <div class="mv-name"></div>
                                <div class="mv-player"></div>
                            </div>
                            <div class="result-mvs-item mvs-margin">
                                <a href="javascript:;" class="mv-pic">
                                    <div class="mv-button"></div>
                                    <div class="mv-mask"></div>
                                </a>
                                <div class="mv-name"></div>
                                <div class="mv-player"></div>
                            </div>
                            <div class="result-mvs-item">
                                <a href="javascript:;" class="mv-pic">
                                    <div class="mv-button"></div>
                                    <div class="mv-mask"></div>
                                </a>
                                <div class="mv-name"></div>
                                <div class="mv-player"></div>
                            </div>
                        </div>

                        <!-- 第二行快 -->
                        <div class="result-mvs-line2">
                            <div class="result-mvs-item mvs-margin">
                                <a href="javascript:;" class="mv-pic">
                                    <div class="mv-button"></div>
                                    <div class="mv-mask"></div>
                                </a>
                                <div class="mv-name"></div>
                                <div class="mv-player"></div>
                            </div>
                            <div class="result-mvs-item mvs-margin">
                                <a href="javascript:;" class="mv-pic">
                                    <div class="mv-button"></div>
                                    <div class="mv-mask"></div>
                                </a>
                                <div class="mv-name"></div>
                                <div class="mv-player"></div>
                            </div>
                            <div class="result-mvs-item mvs-margin">
                                <a href="javascript:;" class="mv-pic">
                                    <div class="mv-mask"></div>
                                    <div class="mv-button"></div>
                                </a>
                                <div class="mv-name"></div>
                                <div class="mv-player"></div>
                            </div>
                            <div class="result-mvs-item">
                                <a href="javascript:;" class="mv-pic">
                                    <div class="mv-mask"></div>
                                    <div class="mv-button"></div>
                                </a>
                                <div class="mv-name"></div>
                                <div class="mv-player"></div>
                            </div>
                        </div>

                        <!-- 第三行快 -->
                        <div class="result-mvs-line3">
                            <div class="result-mvs-item mvs-margin">
                                <a href="javascript:;" class="mv-pic">
                                    <div class="mv-mask"></div>
                                    <div class="mv-button"></div>
                                </a>
                                <div class="mv-name"></div>
                                <div class="mv-player"></div>
                            </div>
                            <div class="result-mvs-item mvs-margin">
                                <a href="javascript:;" class="mv-pic">
                                    <div class="mv-mask"></div>
                                    <div class="mv-button"></div>
                                </a>
                                <div class="mv-name"></div>
                                <div class="mv-player"></div>
                            </div>
                            <div class="result-mvs-item mvs-margin">
                                <a href="javascript:;" class="mv-pic">
                                    <div class="mv-mask"></div>
                                    <div class="mv-button"></div>
                                </a>
                                <div class="mv-name"></div>
                                <div class="mv-player"></div>
                            </div>
                            <div class="result-mvs-item">
                                <a href="javascript:;" class="mv-pic">
                                    <div class="mv-mask"></div>
                                    <div class="mv-button"></div>
                                </a>
                                <div class="mv-name"></div>
                                <div class="mv-player"></div>
                            </div>
                        </div>
                    </div>

                    <!-- 无搜索记录 -->
                    <div class="no-result">无搜索记录！</div>

                    <!-- mv播放页面 -->
                    <div class="mv-display-area">
                        <!-- mv -->
                        <video class="mv-video" controls="controls" autoplay="autoplay"></video>

                        <!-- mv信息 -->
                        <div class="mv-inf">
                            <div class="mv-title"></div>
                            <div class="mv-counts"></div>
                        </div>

                        <!-- 评论数量 -->
                        <div class="comment-title-counts">
                            <div class="comment-title">评论</div>
                            <div class="comment-counts"></div>
                        </div>

                        <!-- 发表评论 -->
                        <textarea class="comment-text" rows="5" cols="80"></textarea>
                        <button class="comment-button">发表评论</button>

                        <!-- 我的评论标题 -->
                        <div class="my-comment-title">我的评论</div>
                        <div class="no-comment-tip">评论内容不能为空!</div>

                        <!-- 我的评论 -->
                        <div class="my-comment">
                            <div class="my-comment-head"></div>
                            <div class="my-comment-name"></div>
                            <div class="my-comment-date"></div>
                            <div class="my-comment-content"></div>
                            <div class="my-comment-like"></div>
                            <button class="delete-mv-comment-btn">删除评论</button>
                        </div>

                        <!-- 精彩评论标题 -->
                        <div class="hot-comments-title">精彩评论</div>

                        <!-- 精彩评论 -->
                        <div class="hot-comments">
                            <div class="comment-user-head"></div>
                            <div class="comment-user-name"></div>
                            <div class="comment-date"></div>
                            <div class="comment-content"></div>
                            <div class="comment-like"></div>
                        </div>
                        <div class="hot-comments">
                            <div class="comment-user-head"></div>
                            <div class="comment-user-name"></div>
                            <div class="comment-date"></div>
                            <div class="comment-content"></div>
                            <div class="comment-like"></div>
                        </div>
                        <div class="hot-comments">
                            <div class="comment-user-head"></div>
                            <div class="comment-user-name"></div>
                            <div class="comment-date"></div>
                            <div class="comment-content"></div>
                            <div class="comment-like"></div>
                        </div>
                        <div class="hot-comments">
                            <div class="comment-user-head"></div>
                            <div class="comment-user-name"></div>
                            <div class="comment-date"></div>
                            <div class="comment-content"></div>
                            <div class="comment-like"></div>
                        </div>
                        <div class="hot-comments">
                            <div class="comment-user-head"></div>
                            <div class="comment-user-name"></div>
                            <div class="comment-date"></div>
                            <div class="comment-content"></div>
                            <div class="comment-like"></div>
                        </div>
                    </div>

                    <!-- 音乐信息页面 -->
                    <div class="song-display-area">
                        <!-- 音乐基本信息 -->
                        <div class="song-basic-msg">
                            <div class="song-album-pic"></div>
                            <div class="song-name"></div>
                            <div class="song-player"></div>
                            <div class="song-album"></div>
                            <div class="song-publishtime"></div>
                            <button class="display-music">播放</button>
                            <button class="song-like">喜欢</button>
                        </div>

                        <!-- 评论数量 -->
                        <div class="comment-title-counts">
                            <div class="comment-title">评论</div>
                            <div class="comment-counts"></div>
                        </div>

                        <!-- 发表评论 -->
                        <textarea class="comment-text" rows="5" cols="80"></textarea>
                        <button class="comment-button">发表评论</button>

                        <!-- 我的评论标题 -->
                        <div class="my-comment-title">我的评论</div>
                        <div class="no-comment-tip">评论内容不能为空!</div>

                        <!-- 我的评论 -->
                        <div class="my-comment">
                            <div class="my-comment-head"></div>
                            <div class="my-comment-name"></div>
                            <div class="my-comment-date"></div>
                            <div class="my-comment-content"></div>
                            <div class="my-comment-like"></div>
                            <button class="delete-song-comment-btn">删除评论</button>
                        </div>


                        <!-- 精彩评论标题 -->
                        <div class="hot-comments-title">精彩评论</div>

                        <!-- 精彩评论 -->
                        <div class="hot-comments">
                            <div class="comment-user-head"></div>
                            <div class="comment-user-name"></div>
                            <div class="comment-date"></div>
                            <div class="comment-content"></div>
                            <div class="comment-like"></div>
                        </div>
                        <div class="hot-comments">
                            <div class="comment-user-head"></div>
                            <div class="comment-user-name"></div>
                            <div class="comment-date"></div>
                            <div class="comment-content"></div>
                            <div class="comment-like"></div>
                        </div>
                        <div class="hot-comments">
                            <div class="comment-user-head"></div>
                            <div class="comment-user-name"></div>
                            <div class="comment-date"></div>
                            <div class="comment-content"></div>
                            <div class="comment-like"></div>
                        </div>
                        <div class="hot-comments">
                            <div class="comment-user-head"></div>
                            <div class="comment-user-name"></div>
                            <div class="comment-date"></div>
                            <div class="comment-content"></div>
                            <div class="comment-like"></div>
                        </div>
                        <div class="hot-comments">
                            <div class="comment-user-head"></div>
                            <div class="comment-user-name"></div>
                            <div class="comment-date"></div>
                            <div class="comment-content"></div>
                            <div class="comment-like"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- 引入外部js文件 -->
    <!-- ajax请求封装函数 -->
    <script src="js/ajaxRequest.js"></script>
    <!-- 动画封装函数 -->
    <script src="js/animate.js"></script>
    <!-- 轮播图 -->
    <script src="js/playlist-recommend.js"></script>
    <!-- 头部导航栏效果、登录及渲染 -->
    <script src="js/header.js"></script>
    <!-- 热搜、模糊搜索、历史搜索、搜索渲染、MV页面 -->
    <script src="js/search.js"></script>
    <!-- 音乐信息、喜欢、评论 -->
    <script src="js/musicRender.js"></script>
    <!-- "我的喜欢"、"我的歌单" -->
    <script src="js/user.js"></script>
    <!-- 执行特殊功能的封装函数 -->
    <script src="js/encapsulation.js"></script>
</body>

</html>